import React from 'react';
import { Card, Typography, Table, Tag, Space } from 'antd';
import { RiseOutlined, FallOutlined } from '@ant-design/icons';

const { Title, Paragraph } = Typography;

const TonghuashunThemes: React.FC = () => {
  const cardStyle = {
    backgroundColor: '#112240',
    borderColor: '#233554',
    marginBottom: '20px',
  };
  
  const cardHeadStyle = {
    backgroundColor: '#112240',
    borderBottomColor: '#233554',
  };
  
  const cardBodyStyle = {
    backgroundColor: '#112240',
  };

  // 同花顺题材数据
  const themeData = [
    {
      key: '1',
      theme: '半导体国产化',
      stockCount: 68,
      averageChange: 2.8,
      trend: 'up',
      leadingStocks: [
        { name: '中芯国际', change: 4.2 },
        { name: '北方华创', change: 3.5 },
        { name: '长电科技', change: 2.9 },
      ],
      description: '国产替代加速，EDA、设备、材料全产业链受益',
    },
    {
      key: '2',
      theme: '新型储能',
      stockCount: 42,
      averageChange: 1.9,
      trend: 'up',
      leadingStocks: [
        { name: '宁德时代', change: 3.1 },
        { name: '阳光电源', change: 2.6 },
        { name: '科陆电子', change: 2.2 },
      ],
      description: '能源转型加速，储能市场规模快速扩大',
    },
    {
      key: '3',
      theme: '军工装备',
      stockCount: 56,
      averageChange: 1.5,
      trend: 'up',
      leadingStocks: [
        { name: '中航沈飞', change: 2.8 },
        { name: '航发动力', change: 2.3 },
        { name: '中直股份', change: 1.9 },
      ],
      description: '国防预算增长，军工装备升级换代加速',
    },
    {
      key: '4',
      theme: '数字经济',
      stockCount: 73,
      averageChange: -0.8,
      trend: 'down',
      leadingStocks: [
        { name: '浪潮信息', change: -1.2 },
        { name: '用友网络', change: -0.9 },
        { name: '广联达', change: -0.5 },
      ],
      description: '数字经济基础设施建设提速，但短期估值调整',
    },
    {
      key: '5',
      theme: '生物医药',
      stockCount: 89,
      averageChange: -1.2,
      trend: 'down',
      leadingStocks: [
        { name: '恒瑞医药', change: -1.8 },
        { name: '药明康德', change: -1.5 },
        { name: '迈瑞医疗', change: -0.9 },
      ],
      description: '医保控费压力持续，创新药研发进入收获期',
    },
  ];

  const columns = [
    {
      title: '题材名称',
      dataIndex: 'theme',
      key: 'theme',
      render: (text: string) => <span style={{ color: '#64ffda', fontWeight: 'bold' }}>{text}</span>,
    },
    {
      title: '相关股票数',
      dataIndex: 'stockCount',
      key: 'stockCount',
    },
    {
      title: '平均涨跌幅',
      dataIndex: 'averageChange',
      key: 'averageChange',
      render: (change: number, record: any) => (
        <span style={{ color: change > 0 ? '#ff4d4f' : '#3f8600' }}>
          {change > 0 ? '+' : ''}{change}% 
          {record.trend === 'up' ? 
            <RiseOutlined style={{ marginLeft: 5 }} /> : 
            <FallOutlined style={{ marginLeft: 5 }} />
          }
        </span>
      ),
    },
    {
      title: '龙头股表现',
      dataIndex: 'leadingStocks',
      key: 'leadingStocks',
      render: (stocks: any[]) => (
        <Space direction="vertical" size="small">
          {stocks.map(stock => (
            <div key={stock.name}>
              <span>{stock.name}</span>
              <span style={{ 
                color: stock.change > 0 ? '#ff4d4f' : '#3f8600',
                marginLeft: 8
              }}>
                {stock.change > 0 ? '+' : ''}{stock.change}%
              </span>
            </div>
          ))}
        </Space>
      ),
    },
    {
      title: '题材描述',
      dataIndex: 'description',
      key: 'description',
      render: (text: string) => <span style={{ color: '#8892b0' }}>{text}</span>,
    },
  ];

  return (
    <div style={{ padding: '20px' }}>
      <Card 
        title="同花顺题材" 
        style={cardStyle}
        headStyle={cardHeadStyle}
        bodyStyle={cardBodyStyle}
      >
        <Typography style={{ color: '#ccd6f6', marginBottom: '20px' }}>
          <Paragraph>
            同花顺题材是市场资金关注的重要方向，通过对题材板块的分析，可以把握市场热点轮动和资金流向。
            以下是当前市场主要题材板块及其表现。
          </Paragraph>
        </Typography>
        
        <Table 
          dataSource={themeData} 
          columns={columns} 
          pagination={false}
          style={{ 
            backgroundColor: '#112240',
            color: '#ccd6f6'
          }}
        />
      </Card>
    </div>
  );
};

export default TonghuashunThemes;